<style lang="less">
</style>

<template>
    <div>
        <Card shadow>
            <Tabs type="card" :value="selectPane" @on-click="clickTabs">
                <TabPane label="投诉对象" name="1">
                    <Form :label-width="120">
                        <Row>
                            <Col span="4">
                                <FormItem label="起始时间：">
                                    <DatePicker v-model="date1" transfer format="yyyy-MM-dd" type="date" placeholder="" @on-change="changeStartTime"></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="4">
                                <FormItem label="结束时间：">
                                    <DatePicker v-model="date2" transfer format="yyyy-MM-dd" type="date" placeholder="" @on-change="changeEndTime"></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                    <Table border :columns="columns1" :data="data1"></Table>
                </TabPane>
                <TabPane label="投诉原因" name="2">
                    <Form :label-width="120">
                        <Row>
                            <Col span="4">
                                <FormItem label="起始时间：">
                                    <DatePicker v-model="date1" transfer format="yyyy-MM-dd" type="date" placeholder="" @on-change="changeStartTime"></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="4">
                                <FormItem label="结束时间：">
                                    <DatePicker v-model="date2" transfer format="yyyy-MM-dd" type="date" placeholder="" @on-change="changeEndTime"></DatePicker>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                    <Table border :columns="columns2" :data="data2"></Table>
                </TabPane>
            </Tabs>
        </Card>
    </div>
</template>

<script>
import iviewTable from '@/view/common/table/Table.vue';
import iviewPage from '@/view/common/page/Page.vue';
import memberList from '@/view/business/member/MemberList.vue';
import Table from "../common/table/Table";
export default {
    name: 'text-editor',
    components: {
        Table,
        iviewTable,
        iviewPage,
        memberList
    },
    data () {
        return {
            baseURL: '/user/statistics/reason',
            selectPane: '1',
            date1: '',
            date2: '',
            startTime: '',
            endTime: '',
            data1: [],
            columns1: [
                {
                    title: '投诉对象',
                    key: 'name'
                },{
                    title: '投诉次数',
                    key: 'count',
                    sortable: true
                }
            ],
            data2: [],
            columns2: [
                {
                    title: '投诉原因',
                    key: 'name'
                },{
                    title: '投诉次数',
                    key: 'count',
                    sortable: true
                }
            ],
            condition: {
                startTime: '',
                endTime: ''
            }
        };
    },
    methods: {
        clickTabs (name) {
            this.date1 = ''
            this.date2 = ''
            this.condition.startTime = ''
            this.condition.endTime = ''
            if (name === '1') {
                this.search1()
            } else if (name === '2') {
                this.search2()
            }
            this.selectPane = name
        },
        search1 () {
            let url = this.baseURL + '/search1'
            this.$ajax.post(url, this.condition).then(r => {
                let {code, data, msg} = r.data
                if (code === 0) {
                    this.data1 = data
                } else {
                    this.$bus.alert('error', msg)
                }
            })
        },
        search2 () {
            let url = this.baseURL + '/search2'
            this.$ajax.post(url, this.condition).then(r => {
                let {code, data, msg} = r.data
                if (code === 0) {
                    this.data2 = data
                } else {
                    this.$bus.alert('error', msg)
                }
            })
        },
        changeStartTime (val, t) {
            this.condition.startTime = val + ' 00:00:00'
            if (this.selectPane === '1') {
                this.search1()
            } else if (this.selectPane === '2') {
                this.search2()
            }
        },
        changeEndTime (val, t) {
            this.condition.endTime = val + ' 23:59:59'
            if (this.selectPane === '1') {
                this.search1()
            } else if (this.selectPane === '2') {
                this.search2()
            }
        },
        init () {
            this.selectPane = '1'
            this.$refs.list1.refresh()
        }
    },
    mounted () {
        this.init()
    },
    watch: {
        '$route' (to) {
            if (to.path === '/statistics/customer') {
                this.init()
            }
        }
    }
}
</script>

<style>

</style>
